<!--
*  功能描述：客户管理：联系人信息
 -->
<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-descriptions title="查询联系人" border>
        </el-descriptions>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="联系人姓名">
            <el-input v-model="personNmae" placeholder="联系人姓名"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="info" @click="loadExcel">导出</el-button>
          </el-form-item>
        </el-form>
        <el-descriptions title="客户列表信息" border>
        </el-descriptions>
      </el-col>
      <el-col :span="24">
        <div>

          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="PersonId" label="序号">
            </el-table-column>
            <el-table-column prop="PersonNmae" label="姓名">
            </el-table-column>
            <el-table-column prop="PersonZhiWu" label="职务">
            </el-table-column>
            <el-table-column prop="PersonBuMen" label="部门">
            </el-table-column>
            <el-table-column prop="PersonPhone" label="电话">
            </el-table-column>
            <el-table-column prop="PersonEmail" label="Email">
            </el-table-column>
            <el-table-column prop="PersonBeiZhu" label="备注">
            </el-table-column>

            <el-table-column prop="CustId" label="编号">
            </el-table-column>
            <el-table-column prop="CustName" label="客户名称">
            </el-table-column>
            <el-table-column prop="CustEmail" label="邮政编码">
            </el-table-column>
            <el-table-column prop="CustPhone" label="公司电话">
            </el-table-column>
            <el-table-column prop="CustAbbreviation" label="客户简称">
            </el-table-column>
            <el-table-column prop="CustAddress" label="公司地址">
            </el-table-column>
            <el-table-column prop="CustPhones" label="联系人">
            </el-table-column>
            <el-table-column prop="CustFaxNumber" label="传真号">
            </el-table-column>
            <el-table-column prop="EdName" label="客户英文名">
            </el-table-column>
            <el-table-column prop="EdIsheZuo" label="是否合作">
            </el-table-column>
            <el-table-column prop="EdCountryId1" label="所在国家">
            </el-table-column>
            <el-table-column prop="EdCountryId2" label="所在省份">
            </el-table-column>
            <el-table-column prop="EdCountryId3" label="所在城市">
            </el-table-column>
            <el-table-column prop="DicName" label="客户类型">
            </el-table-column>
            <el-table-column prop="DicName1" label="所属行业">
            </el-table-column>
            <el-table-column prop="EdEmail" label="email">
            </el-table-column>
            <el-table-column prop="EdCreateTime" label="关系建立时间">
            </el-table-column>
            <el-table-column prop="EdBuMen" label="关系部门">
            </el-table-column>
            <el-table-column prop="EdBankName" label="开启银行名称">
            </el-table-column>
            <el-table-column prop="EdEnterprise" label="企业代码">
            </el-table-column>
            <el-table-column prop="EdBankAccount" label="开启银行账号">
            </el-table-column>
            <el-table-column prop="EdBeiZhu" label="备注">
            </el-table-column>
            <el-table-column label="操作" width="100" fixed="right">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row.CustId)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small" @click=" editPersons(scope.row.PersonId)">查看</el-button>
              </template>
            </el-table-column>

          </el-table>

        </div>
      </el-col>
      <el-col :span="24">
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="PageIndex"
            :page-sizes="[5, 10, 15, 50]" :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount">
          </el-pagination>
        </div>
      </el-col>
      <!-- 查看甲方负责人 -->
      <el-dialog title="查看甲方负责人" :visible.sync="dialogVisibleEdit">
        <el-form :model="AddPerson1">
          <!-- 第一行 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="序号：" :label-width="formLabelWidth">
                {{ AddPerson1.PersonId}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="住宅电话：" :label-width="formLabelWidth">
                {{AddPerson1.PersonShangWuD}}
              </el-form-item>
            </el-col>

          </el-row>
          <!-- 第二行 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="职务：" :label-width="formLabelWidth">
                {{AddPerson1.PersonZhiWu}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话：" :label-width="formLabelWidth">
                {{AddPerson1.PersonPhone}}
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第三行 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="部门：" :label-width="formLabelWidth">
                {{AddPerson1.PersonBuMen}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商务传真：" :label-width="formLabelWidth">
                {{AddPerson1.PersonShangWuC}}
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第四行 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="住宅传真：" :label-width="formLabelWidth">
                {{AddPerson1.PersonZhuZhaiC}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="Email：" :label-width="formLabelWidth">
                {{AddPerson1.PersonEmail}}
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第五行 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="备注：" :label-width="formLabelWidth">
                {{AddPerson1.PersonBeiZhu}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="姓名：" :label-width="formLabelWidth">
                {{AddPerson1.PersonNmae}}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleEdit = false">取 消</el-button>

        </div>
      </el-dialog>
    </el-row>

  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],

      PageIndex: 1,
      PageSize: 5,
      personNmae: '',
      ClientType: [],//客户类型
      industry: [],//所属行业
      totalCount: 50,
      //查看甲方负责人
      AddPerson1: {
        PersonId: '',
        PersonNmae: '',
        PersonZhiWu: '',
        PersonPhone: '',
        PersonBuMen: '',
        PersonShangWuD: '',
        PersonShangWuC: '',
        PersonZhuZhaiC: '',
        PersonEmail: '',
        PersonBeiZhu: '',
      },
      dialogVisibleEdit: false
    }
  },
  methods: {
    showCustList () {//显示
      this.$http({
        url: 'CustInfoPersonList/GetCustomerExPersonView',
        method: 'get',
        params: {
          personNmae: this.personNmae,
          PageIndex: this.PageIndex,
          PageSize: this.PageSize,
        }
      })
        .then(res => {
          this.tableData = res.data.list
          this.totalCount = res.data.totalCount
          console.log(res.data)
        })
    },
    handleSizeChange (val) {
      this.PageSize = val;
      this.showCustList();
    },
    handleCurrentChange (val) {
      this.PageIndex = val;
      this.showCustList();
    },

    showTypes () {//客户类型
      this.$http({
        url: 'CustInfo/GetTypes',
        method: 'get',
      })
        .then(res => {
          this.ClientType = res.data
        })
    },
    showIndustry () {//所属行业
      this.$http({
        url: 'CustInfo/GetIndustry',
        method: 'get',
      })
        .then(res => {
          this.industry = res.data
        })
    },
    handleClick (id) {//查看
      this.$router.push({
        path: '/CustInfoEdit',
        name: 'CustInfoEdit',
        params: {
          id: id
        }
      })
    },
    BianJi (id) {
      this.$router.push({
        path: '/CustInfoUpdate',
        name: 'CustInfoUpdate',
        params: {
          id: id
        }
      })
    },

    onSubmit () {//查询
      this.showCustList();
    },
    editPersons (id) {//查看甲方负责人
      this.dialogVisibleEdit = true
      this.$http({
        url: 'CustInfo/GetPersonFT',
        method: 'get',
        params: {
          id: id
        }
      })
        .then(res => {
          this.AddPerson1 = res.data
        })
    },
    //导出excel
    loadExcel () {
      if (confirm("是否确定下载")) {
        window.open("CustInfoPersonList/DownloadExcel")
      }
    },
  },
  mounted () {
    this.showCustList();
    this.showTypes();
    this.showIndustry();
  }

}
</script>

<style>
</style>